<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="address=no" />
    <!--<title><%= htmlWebpackPlugin.options.title %></title>-->
    <title>帧率统计图表</title>
    <script source="https://chartjs.bootcss.com/dist/Chart.bundle.js" src="./Chart.bundle.2.7.2.js"></script>
    <script source="https://lib.baomitu.com/vue/2.6.12/vue.min.js" src="./vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./styles.css">
</head>

<body>
    <div id="app">
        <div class="card">
            <div class="device-info">
                <div>
                    <div>Platform</div>
                    <div>
                        <img src="./CPU.png" alt="">
                    </div>
                    <div>{{device.soc || 'Unknown'}}</div>
                </div>
                <div>
                    <div>Model</div>
                    <div>
                        <img src="./Phone.png" alt="">
                    </div>
                    <div>{{device.model || 'Unknown'}}</div>
                </div>
                <div>
                    <div>OS</div>
                    <div>
                        <img src="./android.png" alt="">
                    </div>
                    <div>{{device.sdk | androidVersion}}</div>
                </div>
            </div>
            <div class="sessions" v-if="sessions.length > 0">
                <div v-for="session in sessions" :key="session.sessionId" @click="onSessionClick(session)"
                    :data-selected="detail.sessionId === session.sessionId">
                    <div class="logo">
                        <img src="./android.png" alt="">
                    </div>
                    <div>
                        <div>{{session.appName || session.packageName}}</div>
                        <div class="date">{{session.beginTime | dateFormat}}</div>
                    </div>
                    <div class="delete" @click="deleteSession(session)">
                        <img src="./delete.png" alt="">
                    </div>
                </div>
            </div>
            <div v-else class="sessions empty">
                <div>尚无应用帧率记录</div>
            </div>
            <div class="start-icon" @click="toggleFpsToolbar" :state-on="toolbarOn"></div>
        </div>
        <div class="card">
            <div class="rows">
                <div class="row">{{detail.appName || detail.packageName || 'APP'}}</div>
                <div class="row t-row">
                    <div>{{detail.beginTime | dateFormat}}</div>
                </div>
                <div class="row fps-row">
                    <div class="col">
                        <div class="st">MAX</div>
                        <div class="number">{{(detail.max || 0).toFixed(1)}}</div>
                        <div class="unit">FPS</div>
                    </div>
                    <div class="col">
                        <div class="st">MIN</div>
                        <div class="number">{{(detail.min || 0).toFixed(1)}}</div>
                        <div class="unit">FPS</div>
                    </div>
                    <div class="col">
                        <div class="st">AVG</div>
                        <div class="number">{{(detail.avg || 0).toFixed(1)}}</div>
                        <div class="unit">FPS</div>
                    </div>
                </div>
                <div class="row fps-row">
                    <div class="col">
                        <div class="st">≥ 45FPS</div>
                        <div class="number">{{detail.fluency || '0'}}%</div>
                        <div class="unit">Smooth</div>
                    </div>
                    <div class="col">
                        <div class="st">≥ 46°C</div>
                        <div class="number">{{detail.highTempRatio}}%</div>
                        <div class="unit">Temperature</div>
                    </div>
                    <div class="col">
                        <div class="st">MAX</div>
                        <div class="number">{{detail.maxTemp}}°C</div>
                        <div class="unit">Temperature</div>
                    </div>
                </div>
            </div>
            <canvas id="myChart" ref="myChart"></canvas>
        </div>
    </div>
</body>
<script src="./scripts.js"></script>

</html>